<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
当前值：{{number}}
    <button @click="number++">点击我+1</button>
    <!--使用v-show 控制的是元素的display的值-->
    <h2 v-show="number == 2">值为2</h2>
    <h2 v-show="number == 3">值为3</h2>

    <!--使用v-if-else-if-else -->
    <div v-if="number == 1">mysql</div>
    <div v-else-if="number == 2">java</div>
    <div v-else-if="number == 3">python</div>
    <div v-else>php</div>

    <!--v-if配合template 控制的是元素的移除和添加-->
    <template  v-if="number === 1">
    <h2>你好,</h2>
    <h2>{{name}}</h2>
    <h2>我是你的朋友！</h2>
    </template>
</div>

</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                name:'zs',
                number:0
            }
        },

    });
</script>